<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 shim for IE8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->


    <link href="__STATIC__/themes/admin_simpleboot3/public/assets/themes/flatadmin/bootstrap.min.css" rel="stylesheet">
    <link href="__STATIC__/themes/admin_simpleboot3/public/assets/simpleboot3/css/simplebootadmin.css" rel="stylesheet">
    <link href="__STATIC__/static/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        form .input-order {
            margin-bottom: 0px;
            padding: 0 2px;
            width: 42px;
            font-size: 12px;
        }

        form .input-order:focus {
            outline: none;
        }

        .table-actions {
            margin-top: 5px;
            margin-bottom: 5px;
            padding: 0px;
        }

        .table-list {
            margin-bottom: 0px;
        }

        .form-required {
            color: red;
        }
    </style>
    <script type="text/javascript">
        //全局变量
        var GV = {
            ROOT: "/",
            WEB_ROOT: "/",
            JS_ROOT: "static/js/",
            APP: 'admin'/*当前应用名*/
        };
    </script>
    <script src="__STATIC__/themes/admin_simpleboot3/public/assets/js/jquery-1.10.2.min.js"></script>
    <script src="__STATIC__/static/js/wind.js"></script>
    <script src="__STATIC__/themes/admin_simpleboot3/public/assets/js/bootstrap.min.js"></script>
    <link href="__STATIC__/static/js/layer/skin/default/layer.css" rel="stylesheet">
    <script src="__STATIC__/static/js/layer/layer.js"></script>
    <script src="__STATIC__/js/layui.js"></script>
    <script>
        Wind.css('artDialog');
        $(function () {
            $("[data-toggle='tooltip']").tooltip({
                container: 'body',
                html: true,
            });
            $("li.dropdown").hover(function () {
                $(this).addClass("open");
            }, function () {
                $(this).removeClass("open");
            });
        });
    </script>
    <style>
        #think_page_trace_open {
            z-index: 9999;
        }
        .layui-upload-file{
            display: none!important;
        }
    </style>
</head>

<body>
<div class="wrap js-check-wrap">

    <ul class="nav nav-tabs">
        <li class="active"><a href="#A" data-toggle="tab">个人信息</a></li>
        <li><a href="#B" data-toggle="tab">修改密码</a></li>
    </ul>

    <form class="form-horizontal">
        <fieldset>
            <div class="tabbable">
                <div class="tab-content" style="margin-top: 20px;">
                    <div class="tab-pane active" id="A">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户账号</label>
                            <div class="col-md-6 col-sm-10">
                                <input type="text" class="form-control" value="{$info.username}" readonly="readonly">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">VIP到期时间</label>
                            <div class="col-md-6 col-sm-10">
                                {eq name="$vip_info.is_vip" value="1"}
                                <a href="javascript:parent.vip()" class="tan" tan="点击开通/续费">VIP到期时间：{$vip_info.expire_time}</a>
                                {else/}
                                <a href="javascript:parent.vip()" class="tan" tan="点击开通/续费">未开通</a>
                                {/eq}
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span class="form-required">*</span>设置昵称</label>
                            <div class="col-md-6 col-sm-10">
                                <input required type="text" id="user_nickname" class="form-control" name="nickname"
                                       value="{$info.nickname}" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span class="form-required">*</span>个性签名</label>
                            <div class="col-md-6 col-sm-10">
                                <input required type="text" id="user_desc" class="form-control" name="desc"
                                       value="{$info.desc}" autocomplete="off">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span class="form-required">*</span>设置头像</label>
                            <div class="col-md-6 col-sm-10">
                                <div class="layui-upload">
                                    <div class="prv">
                                        <img id="prv_avatar" src="{:getUserHead($info.avatar)}" style="width: 80px;height: 80px;display: block">
                                        <button type="button" style="width: 80px;" class="btn btn-sm btn-success" id="test1">上传头像</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" id="submit_user" class="btn btn-success">提交修改</button>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane" id="B">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">原密码</label>
                            <div class="col-md-6 col-sm-10">
                                <input required type="password" id="u_old_password" class="form-control" name="old_password"
                                       autocomplete="new-password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">新密码</label>
                            <div class="col-md-6 col-sm-10">
                                <input required type="password" id="u_password" class="form-control" name="password"
                                       autocomplete="new-password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">重复新密码</label>
                            <div class="col-md-6 col-sm-10">
                                <input required type="password" id="u_re_password" class="form-control" name="re_password"
                                       autocomplete="new-password">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" id="submit_change" class="btn btn-success">修改密码</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </fieldset>
    </form>

</div>

<script>
    layui.use(['upload'],function(){

        var upload = layui.upload;

        var uploadInst = upload.render({
            elem: '#test1'
            ,url: "{:url('user/upload_avatar')}"
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#prv_avatar').attr('src', result); //图片链接（base64）
                });
            }
        });

    });


    $("#submit_user").on('click',function(){
        let nickname = $("#user_nickname").val();
        let desc = $("#user_desc").val();

        if(!nickname.length){
            layer.msg("必须填写昵称~",{icon:2});
            return false;
        }

        $.ajax({
            url:"{:url('user/set_userinfo')}",
            type:'post',
            dataType:'JSON',
            data:{
                nickname:nickname,
                desc:desc
            },
            success:function(result){
                layer.msg(result.msg,{icon: result.code ? 1 : 2 },function(){
                    if(result.code === 1){
                        window.location.reload();
                    }
                })
            }
        })
    });

    $("#submit_change").on('click',function(){
        let old_password = $("#u_old_password").val(),
            password = $("#u_password").val(),
            re_password = $("#u_re_password").val();

        if(!old_password){
            layer.msg("请输入原密码",{icon:2});
            return false;
        }

        if(!password){
            layer.msg("请输入新密码",{icon:2});
            return false;
        }

        if(!re_password){
            layer.msg("请输入重复密码",{icon:2});
            return false;
        }

        if(re_password != password){
            layer.msg("两次输入的密码不一致，请重新输入",{icon:2});
            return false;
        }

        $.ajax({
            url:"{:url('user/change_pass')}",
            type:'post',
            dataType:'JSON',
            data:{
                old_password:old_password,
                password:password
            },
            success:function(result){
                layer.msg(result.msg,{icon: result.code ? 1 : 2 },function(){
                    if(result.code === 1){
                        parent.location.reload();
                    }
                })
            }
        })
    });

    $('.tan').on({
        mouseenter: function () {
            var nei = $(this).attr("tan");
            if (nei) {
                var that = $(this);
                tips = layer.tips("<span style='color:#000;font-size:17px;'>" + nei + "</span>", that, { tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 700 });
            }
        },
        mouseleave: function () {
            layer.close(tips);
        }
    });
</script>
</body>

</html>